<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- ----JavaSpcrit：核心语法+DOM(针对页面操作)+BOM(针对浏览器) 
				学习主体：针对页面操作比较多---DOM操作
				JQuery操作DOM：理解：JQ框架改变页面内容效果
				基础函数---事件源之后出现，事件源语法糖中
				html()  作用：增加一个元素，覆盖原有html
				val()   作用：针对input。实现修改
				text()   作用：生成文本内容
				-->
		 <script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!--  -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima natus harum fugit quod maiores libero suscipit debitis voluptatum ex, placeat soluta quidem veritatis voluptas eius omnis sapiente, excepturi nulla labore?</p>
	    <div style="width: 200px; height:200px; background: #000;"></div>
		<script>
			$("button").click(function(){
				/* JQ操作DOM--html()函数使用 */
				$("p").html("<h1>JQ操作DOM-html函数使用</h1>")
			});
			/* 练习1：div 200*200背景颜色:黑色  下面有一行文本，鼠标滑过之后
			 下面内容修改 <h3>提示，修改为黄颜色
			 */
			/* 练习2：按钮 文本框  点击按钮，文本框增加一行文本 */
			$("div").mouseenter(function(){
				$("h3").html("<h3>黄颜色</h3>")
			});
			$("input[type='button']").click(function(){
			// alert("jq选择器是否选中") 
			$("input[type='text']").val("文本框内容修改~")
			});
			/* 利用JQ操作DOM(页面效果) 元素内容操作(三个函数)
			                          属性操作(四个函数)
									  样式操作(四个函数)
									  位置操作
									  输入和删除操作(七个函数)
									  */
		</script>
	</body>
</html>